<template>
  <div class="da">
    <header>
      <router-link to="/my">
        <van-icon class="jian" size="25" name="arrow-left" />
      </router-link>
      <div class="qian">当前问诊</div>
    </header>
    <main>
      <div>
        <div class="quan" v-if="content">
          <!-- 当content存在时显示内容 -->
          <!-- {{ content }} -->
          <img class="ig" src="../../assets/images/dqwz.png" alt="">
          <div class="zeng">
            <div class="ming">曾小贤</div>
            <div>副主任医师</div>
            <div>小儿科</div>
            <div>问诊时间 2024.03.20 10:20</div>
          </div>
          <router-link to="/about">
            <button class="btn1">继续问诊</button>
          </router-link>
          <router-link to="/about">
            <button class="btn2">结束问诊</button>
          </router-link>

        </div>
        <div v-else>
          <van-empty description="暂无问诊">
            <router-link to="/my">
              <van-button round type="primary" class="bottom-button">返回</van-button>
            </router-link>
          </van-empty>
        </div>
      </div>

    </main>
  </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue';

// 示例数据  
const content = ref('1');

</script>
<style scoped>
.btn1 {
  width: 120px;
  height: 40px;
  background: #999999;
  color: #fff;
  border-radius: 5px;
  margin: 0 50px;
}

.btn2 {
  width: 120px;
  height: 40px;
  background: #3087ea;
  color: #fff;
  border-radius: 5px;
}

.zeng {
  width: 100%;
  height: 30%;
  text-align: center;
}

.zeng div {
  margin-top: 10px
}

.bottom-button {
  width: 160px;
  height: 40px;
}

header {
  width: 100%;
  height: 50px;
  background: #fff;

}

.da {
  width: 100vw;
  height: 100vh;
}

.jian {
  line-height: 50px;
  margin-left: 10px;
  float: left;
  color: #000;
}

.qian {
  line-height: 50px;
  margin-left: 35%;
  font-size: 20px;
  float: left;
}

.quan {
  width: 100vw;
  height: 92vh;
  background: #fff;
}

.ig {
  width: 70%;
  height: 50%;
  margin-left: 20%;
  ;

}
</style>